# Component: Alert

Bootstrap-based hybrid feedback component

Blazor Wrapper

![[Pasted image 20260426073950.png]]

### Class Architecture

This component merges Bootstrap functional classes with BEM structural elements. **Do not override Bootstrap classes directly;** use the BEM elements for custom styling.

| Type      | Class Name             | Description                                            |
| --------- | ---------------------- | ------------------------------------------------------ |
| Bootstrap | `.alert`               | Injected by Blazor. Handles padding and base layout.   |
| Bootstrap | `.alert-{color}`       | Dynamic (e.g., `.alert-danger`). Handles theme colors. |
| ==Block== | `.as-alert`            | The custom hook for CSS overrides.                     |
| Element   | `__header`             | The title (H4). Specifically resets margins.           |
| Element   | `__header-icon`        | The header icon id set                                 |
| Element   | `__message`            | Primary content container.                             |
| Element   | `__additional-message` | Secondary content area for supplementary info.         |

### Implementation Reference

##### Generated HTML

```html
<!-- Final output seen in the Browser -->
<div class="alert alert-warning as-alert" role="alert">
    <h4 class="as-alert__header">
        System Maintenance
    </h4>
    <div class="as-alert__message">
        The server will restart in 5 minutes.
    </div>
    <div class="as-alert__additional-message">
        Please save your active work sessions.
    </div>
</div>
```

##### SCSS

```scss
// Overriding Bootstrap defaults via BEM
.as-alert {
  &__header {
    margin: 0;
    font-weight: 700;
  }

  // Example of contextual styling
  &.alert-danger {
    border-left: 5px solid darkred;
  }
}
```

